<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cartlist.jsp</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script src="<c:url value='/js/round.js'/>"></script>

<link rel="stylesheet" type="text/css"
	href="<c:url value='/jsps/css/cart/list.css'/>">
<script type="text/javascript">
	$(function() {
		showTotal();
		//给全选添加 click 事件
		$("#selectAll").click(function() {
			var bool = $("#selectAll").attr("checked");
			setItemCheckBox(bool);
			setJieSuan(bool);
			showTotal();
		});

		//给所有的条目添加上事件
		$(":checkbox[name=checkboxBtn]").click(function() {
			var all = $(":checkbox[name=checkboxBtn]").length;//所有条目的个数
			var select = $(":checkbox[name=checkboxBtn][checked=true]").length;//所有被选中条目的个数
			if (all == select) {
				$("#selectAll").attr("checked", true);//勾选全选复选框
				setJieSuan(true);//让结算 按钮有效
			} else {
				if (select == 0) {//谁都没选中
					$("#selectAll").attr("checked", false);//取消全选复选框
					setJieSuan(false);//让结算 按钮失效
				} else {
					$("#selectAll").attr("checked", false);//取消全选复选框
					setJieSuan(true);//让结算 按钮有效

				}
			}

			showTotal();
		});

		$(".jian")
				.click(
						function() {
							var id = $(this).attr("id").substring(0, 32);
							var quantity = $("#" + id + "Quantity").val();

							if (quantity == 1) {
								if (confirm("您是否真要删除该条目？")) {
									location = "/goods/CartItemServlet?method=batchDelete&cartItemIds="
											+ id;
								}
							} else {
								sendUpdateQuantity(id, quantity - 1);
							}
						});

		$(".jia").click(function() {
			var id = $(this).attr("id").substring(0, 32);
			var quantity = $("#" + id + "Quantity").val();
			sendUpdateQuantity(id, Number(quantity) + 1);
		});

	});
	
		function sendUpdateQuantity(id, quantity) {
		$.ajax({
			async : false,
			cache : false,
			url : "/goods/CartItemServlet",
			data : {
				method : "updateQuantity",
				cartItemId : id,
				quantity : quantity
			},
			type : "post",
			dataType : "json",
			success : function(result) {
				$("#" + id + "Quantity").val(result.quantity);
				$("#" + id + "Subtotal").text(round(result.subtotal,2));
				showTotal();
			}

		});
	}

	function batchDelete() { 
		var cartItemIdArray = new Array();
		$(":checkbox[name=checkboxBtn][checked=true]").each(function() {
			cartItemIdArray.push($(this).val());
		});
		location = "/goods/CartItemServlet?method=batchDelete&cartItemIds="

				+ cartItemIdArray;
	}

	//计算总计
	function showTotal() {
		var total = 0;
		$(":checkbox[name=checkboxBtn][checked=true]").each(function() {
			var id = $(this).val();
			var text = $("#" + id + "Subtotal").text();
			total += Number(text);
		});
		$("#total").text(round(total, 2));//rond(x,y);把 x 保留  y 位 小数
	}

	//统一设置所有条目的复选按钮
	function setItemCheckBox(bool) {
		$(":checkbox[name=checkboxBtn]").attr("checked", bool);
	}
	//设置结算按钮样式
	function setJieSuan(bool) {
		if (bool) {
			$("#jiesuan").removeClass("kill").addClass("jiesuan");
			$("#jiesuan").unbind("click");//撤销当前元素上所有 click 事件
		} else {
			$("#jiesuan").removeClass("jiesuan").addClass("kill");
			$("#jiesuan").click(function() {
				return false;
			});//使结算 的 超链接不管用
		}
	}
	
	function jiesuan(){
		//获取所有被选中的条目的ID ，放到数组中
		var cartItemIdArray = new Array();
		$(":checkbox[name=checkboxBtn][checked=true]").each(function() {
			cartItemIdArray.push($(this).val());
		});
		$("#hiddentotal").val($("#total").text());
		$("#cartItemIds").val(cartItemIdArray.toString());
		$("#jieSuanForm").submit();
	}
</script>
</head>
<body>

	<c:choose>
		<c:when test="${empty cartItemList }">
			<br>
			<br>

			<table width="95%" align="center" cellpadding="0" cellspacing="0">
				<tr>
					<td align="right"><img align="top"
						src="<c:url value='/images/icon_empty.png'/>" />
					</td>
					<td><span class="spanEmpty">您的购物车中暂时没有商品</span>
					</td>
				</tr>
			</table>

		</c:when>
		<c:otherwise>

			<br>
			<br>
			<table width="95%" align="center" cellpadding="0" cellspacing="0">
				<tr align="center" bgcolor="#efeae5">
					<td align="left" width="50px"><input type="checkbox"
						id="selectAll" checked="checked" /><label for="selectAll">全选</label>
					</td>
					<td colspan="2">商品名称</td>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
					<td>操作</td>
				</tr>

				<c:forEach items="${cartItemList }" var="cartItem">

					<tr align="center">
						<td align="left"><input value="${cartItem.cartItemId }"
							type="checkbox" name="checkboxBtn" checked="checked" />
						</td>
						<td align="left" width="70px"><a class="linkImage"
							href="<c:url value='${cartItem.book.image_w }'/>"><img
								border="0" width="54" align="top"
								src="<c:url value='/${cartItem.book.image_b }'/>" /> </a>
						</td>
						<td align="left" width="400px"><a
							href="<c:url value='/jsps/book/desc.jsp'/>"><span>${cartItem.book.bname
									}</span> </a>
						</td>
						<td><span>&yen;<span class="currPrice"
								id="${cartItem.cartItemId }CurrPrice">${cartItem.book.currPrice
									}</span> </span></td>
						<td><a class="jian" id="${cartItem.cartItemId }Jian"></a><input
							class="quantity" readonly="readonly"
							id="${cartItem.cartItemId }Quantity" type="text"
							value="${cartItem.quantity }" /><a class="jia"
							id="${cartItem.cartItemId }Jia"></a>
						</td>
						<td width="100px"><span class="price_n">&yen;<span
								class="subTotal" id="${cartItem.cartItemId }Subtotal">${cartItem.subtotal
									}</span> </span>
						</td>
						<td><a
							href="<c:url value='/CartItemServlet?method=batchDelete&cartItemIds=${cartItem.cartItemId }'/>">删除</a>
						</td>
					</tr>
				</c:forEach>



				<tr>
					<td colspan="4" class="tdBatchDelete"><a
						href="javascript:batchDelete()">批量删除</a>
					</td>
					<td colspan="3" align="right" class="tdTotal"><span>总计：</span><span
						class="price_t">&yen;<span id="total"></span> </span>
					</td>
				</tr>
				<tr>
					<td colspan="7" align="right"><a
						href="javascript:jiesuan();" id="jiesuan"
						class="jiesuan"></a>
					</td>
				</tr>
			</table>
			<form id="jieSuanForm" action="<c:url value='/CartItemServlet'/>" method="post">
				<input type="hidden" name="cartItemIds" id="cartItemIds" /> 
				<input type="hidden" name="total" id="hiddentotal" /> 
				<input type="hidden" name="method" value="loadCartItems" />
			</form>
		</c:otherwise>
	</c:choose>


</body>
</html>
